<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .img {
        width: 400px;
        height: 240px;
      }

      .img img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <button @click="sub">上一张</button>
      <div class="img">
        <img :src="imgList[index]" alt="" />
      </div>
      <button @click="add">下一张</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      // 图片
      new Vue({
        el: "#box",
        data: {
          imgList: [
            "./images/1.jpg",
            "./images/2.jpg",
            "./images/3.jpg",
            "./images/4.jpg",
          ],
          index: 0,
        },
        methods: {
          sub() {
            // 上一张图片
            console.log(this.index);
            if (this.index <= 0) {
              this.index = 0;
              return;
            }
            this.index--;
          },
          add() {
            // 下一章图片
            console.log(this.index);
            if (this.index >= this.imgList.length - 1) {
              this.index = this.imgList.length - 1;
              return;
            }
            this.index++;
          },
        },
      });
    </script>
  </body>
</html>
